
.vuefinder__breadcrumb__container {
  @apply space-x-0.5 flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm grow-0;
}

.vuefinder__breadcrumb__toggle-tree {
  @apply h-6 w-6 p-0.5 rounded cursor-pointer text-slate-700;
}

.vuefinder__breadcrumb__toggle-tree--active {
  @apply bg-gray-300 dark:bg-gray-700;
}

.vuefinder__breadcrumb__go-up--active {
  @apply text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer;
}

.vuefinder__breadcrumb__go-up--inactive {
  @apply text-gray-400 dark:text-neutral-500;
}

.vuefinder__breadcrumb__search-container {
  @apply flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden;
}

.vuefinder__breadcrumb__list {
  @apply flex leading-6;
}

.vuefinder__breadcrumb__hidden-list {
  @apply flex;
}

.vuefinder__breadcrumb__separator {
  @apply text-neutral-300 dark:text-gray-600 mx-0.5;
}

.vuefinder__breadcrumb__hidden-toggle {
  @apply text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer;
}

.vuefinder__breadcrumb__hidden-toggle-icon {
  @apply px-1 pointer-events-none;
}

.vuefinder__breadcrumb__visible-list {
  @apply flex leading-6 w-full overflow-hidden;
}

.vuefinder__breadcrumb__item {
  @apply px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap;
}

.vuefinder__breadcrumb__search-mode {
  @apply relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full;
}

.vuefinder__breadcrumb__search-input {
  @apply w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent;
}

.vuefinder__breadcrumb__hidden-dropdown {
  @apply z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600;
}

.vuefinder__breadcrumb__hidden-item {
  @apply px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap;
}

.vuefinder__breadcrumb__hidden-item-content {
  @apply flex pointer-events-none;
}

.vuefinder .vuefinder__breadcrumb__hidden-item-icon {
  @apply h-5 w-5;
}

.vuefinder .vuefinder__breadcrumb__hidden-item-text {
  @apply inline-block w-full text-ellipsis overflow-hidden;
}
